<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>黄河流域城市群经济发展时空格局分析</title>
  <!-- css样式表 -->
  <!-- <link rel="stylesheet" href="js/bs/css/bootstrap.css"> -->
  <link rel="stylesheet" href="../public/js/bs/css/bootstrap.css">
  <!-- js脚本 -->
  <!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
  <script type="text/javascript" src="../public/js/jquery.min.js"></script>
  <!-- <script src="js/bs/js/bootstrap.js"></script> -->
  <script src="../public/js/bs/js/bootstrap.js"></script>
  <!-- <script type="text/javascript" include="echarts,leaflet-icon-pulse" src="dist/leaflet/include-leaflet.js"></script> -->
  <script type="text/javascript" include="echarts,leaflet-icon-pulse" src="../dist/leaflet/include-leaflet.js"></script>

  <style>
    #divBody {
      height: 100%;
      width: 100%;
      margin-top: 5px;
      /* padding-left: 5px;
      padding-right: 5px; */
    }

    #anniu button {
      width: 100px;
      height: 40px;
      z-index: 200000;
    }

    #searchInput {
      display: none;
      position: absolute;
      width: 200px;
      margin-left: 82%;
      margin-top: 4px;
      z-index: 200000;
    }

    #timeSelect {
      /* background-color: burlywood; */
      position: absolute;
      top: 7%;
      width: 200px;
      text-align: left;
      margin-top: 4px;
      padding: 15px;
      font-size: 14px;
      z-index: 200000;
    }

    #timeSelect #yearSelect {
      display: none;
    }

    .r-list {
      box-shadow: 2px 3px 5px 0px rgba(51, 51, 51, 0.18);
      border-radius: 5px;
      width: 45px;
      margin-left: 55px;
    }

    .r-item {
      background-image: url('../public/img/全图.png');
      background-repeat: no-repeat;
      background-position: center;
      border-style: none;
      outline: none;
    }

    .r-item2 {
      background-image: url('../public/img/切换区域.png');
    }

    .r-item3 {
      background-image: url('../public/img/搜索.png');
    }

    .r-item4 {
      background-image: url('../public/img/刷新图层.png');
    }

    /* #rightChart,#leftChart::-webkit-scrollbar{
      border: 0px;
    } */
  </style>
</head>

<body onload="initMap()">
  <div class="container" id="divBody">
    <!-- 导航部分---begin -->
    <div class="nav row">
      <ul id="myTab" class="nav nav-tabs">
        <nav class="navbar navbar-inverse" role="navigation">
          <div class="container-fluid">
            <div class="navbar-header" id="navPart">
              <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon-education"></span>
                黄河流域城市群经济发展时空格局分析</a>
            </div>
            <div>
              <ul class="nav navbar-nav">
                <li class="active dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">基础指标
                    <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#population" data-toggle="tab" onclick="getPopulationInfo()">常住人口</a></li>
                    <script>
                      function getPopulationInfo() {
                        //获取年份选择控件中的值
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/population.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: "SELECT cityName,totalPopulation FROM year_" + year.toString()
                          },
                          success: function (result, status, xhr) {
                            let resultJsonArr = bubbleJson(result, "totalPopulation");
                            //遍历JSON数组，获取城市名和人口
                            let cityNameArr = new Array(),
                              populationArr = new Array();
                            for (var i = 0; i < resultJsonArr.length; i++) {
                              cityNameArr.push(resultJsonArr[i].cityName);
                              populationArr.push(resultJsonArr[i].totalPopulation);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "常住人口数", cityNameArr, populationArr, "万人");
                          }
                        });
                      }
                    </script>
                    <li class="divider"></li>
                    <li><a href="#perGDP" tabindex="-1" data-toggle="tab" onclick="getTotalGDP()">GDP总值</a></li>
                    <script>
                      function getTotalGDP() {
                        //获取年份选择控件中的值
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/totalGDP.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: "SELECT cityName,perGDP,totalPopulation FROM year_" + year.toString()
                          },
                          success: function (result, status, xhr) {
                            let resObj = new Array();
                            for (var i = 0; i < result.length; i++) {
                              resObj.push({
                                'cityName': result[i].cityName,
                                'totalGDP': result[i].perGDP * result[i].totalPopulation
                              });
                            }
                            //冒泡排序
                            let sortedResObj = bubbleJson(resObj, "totalGDP");
                            // //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              totalGDPArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              totalGDPArr.push(sortedResObj[i].totalGDP);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "总GDP/亿元", cityNameArr, totalGDPArr, "亿元");
                          }
                        });
                      }
                    </script>

                    <li class="divider"></li>
                    <li><a href="#CZint" tabindex="-1" data-toggle="tab" onclick="getFinanceIncome()">地方财政收入</a></li>
                    <script>
                      function getFinanceIncome() {
                        //获取年份选择控件中的值
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/financeIncomeAndOutCome.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: "SELECT cityName,perFinanceIncom,perFinanceOutcome,totalPopulation FROM year_" + year.toString()
                          },
                          success: function (result, status, xhr) {
                            let resObj = new Array();
                            for (var i = 0; i < result.length; i++) {
                              resObj.push({
                                'cityName': result[i].cityName,
                                'financeVal': result[i].perFinanceIncom * result[i].totalPopulation / 100
                              });
                            }
                            //冒泡排序
                            let sortedResObj = bubbleJson(resObj, "financeVal");
                            // //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              financeArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              financeArr.push(sortedResObj[i].financeVal);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "总财政收入/亿元", cityNameArr, financeArr, "亿元");
                          }
                        });
                      }
                    </script>

                    <li><a href="#CZout" tabindex="-1" data-toggle="tab" onclick="getFinanceOutcome()">地方财政支出</a></li>
                    <script>
                      function getFinanceOutcome() {
                        //获取年份选择控件中的值
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/financeIncomeAndOutCome.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: "SELECT cityName,perFinanceIncom,perFinanceOutcome,totalPopulation FROM year_" + year.toString()
                          },
                          success: function (result, status, xhr) {
                            let resObj = new Array();
                            for (var i = 0; i < result.length; i++) {
                              resObj.push({
                                'cityName': result[i].cityName,
                                'financeVal': result[i].perFinanceOutcome * result[i].totalPopulation / 100
                              });
                            }
                            //冒泡排序
                            let sortedResObj = bubbleJson(resObj, "financeVal");
                            // //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              financeArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              financeArr.push(sortedResObj[i].financeVal);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "总财政支出/亿元", cityNameArr, financeArr, "亿元");
                          }
                        });
                      }
                    </script>

                    <li><a href="#Educated" tabindex="-1" data-toggle="tab" onclick="getPerEduOutCome()">教育事业支出</a></li>
                    <script>
                      function getPerEduOutCome() {
                        //获取年份选择控件中的值
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/perEduOutCome.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: "SELECT cityName,perEduOutcome FROM year_" + year.toString()
                          },
                          success: function (result, status, xhr) {
                            //冒泡排序
                            let sortedResObj = bubbleJson(result, "perEduOutcome");
                            //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              perEduOutcomeArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              perEduOutcomeArr.push(sortedResObj[i].perEduOutcome);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "人均教育支出/百元", cityNameArr, perEduOutcomeArr, "百元");
                          }
                        });
                      }
                    </script>

                    <li><a href="#Science" tabindex="-1" data-toggle="tab" onclick="getPerScienceOutCome()">科学事业支出</a>
                    </li>
                    <script>
                      function getPerScienceOutCome() {
                        //获取年份选择控件中的值
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/PerScienceOutCome.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: "SELECT cityName,perScienceOutcome FROM year_" + year.toString()
                          },
                          success: function (result, status, xhr) {
                            //perScienceOutcome
                            //冒泡排序
                            let sortedResObj = bubbleJson(result, "perScienceOutcome");
                            //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              perScienceOutcomeArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              perScienceOutcomeArr.push(sortedResObj[i].perScienceOutcome);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "人均科研支出/百元", cityNameArr, perScienceOutcomeArr, "百元");
                          }
                        });
                      }
                    </script>

                    <li><a href="#Save" tabindex="-1" data-toggle="tab" onclick="getperSaveMoney()">城乡储蓄年末余额</a></li>
                    <script>
                      function getperSaveMoney() {
                        //获取年份选择控件中的值
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/perSaveMoney.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: "SELECT cityName,perSaveMoney FROM year_" + year.toString()
                          },
                          success: function (result, status, xhr) {
                            //perScienceOutcome
                            //冒泡排序
                            let sortedResObj = bubbleJson(result, 'perSaveMoney');
                            //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              perSaveMoneyArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              perSaveMoneyArr.push(sortedResObj[i].perSaveMoney);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "人均城乡储蓄/万元", cityNameArr, perSaveMoneyArr, "万元");
                          }
                        });

                      }
                    </script>

                    <li class="divider"></li>
                    <li><a href="#Second" tabindex="-1" data-toggle="tab" onclick="getSecondaryRate()">第二产业比重</a></li>
                    <script>
                      function getSecondaryRate() {
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/SecondaryRate.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: 'SELECT cityName,percentSecond FROM year_' + year.toString()
                          },
                          success: function (result, status, xhr) {
                            // console.log(result)
                            //perScienceOutcome
                            //冒泡排序
                            let sortedResObj = bubbleJson(result, "percentSecond");
                            //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              perSaveMoneyArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              perSaveMoneyArr.push(sortedResObj[i].percentSecond);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "第二产业占比", cityNameArr, perSaveMoneyArr, "%");
                          }
                        });
                      }
                    </script>


                    <li><a href="#Third" tabindex="-1" data-toggle="tab" onclick="getThird()">第三产业比重</a></li>
                    <script>
                      function getThird() {
                        //percentThird
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/thirdRate.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: 'SELECT cityName,percentThird FROM year_' + year.toString()
                          },
                          success: function (result, status, xhr) {
                            //percentThird
                            //冒泡排序
                            let sortedResObj = bubbleJson(result, "percentThird");
                            //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              perSaveMoneyArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              perSaveMoneyArr.push(sortedResObj[i].percentThird);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "第三产业占比", cityNameArr, perSaveMoneyArr, "%");
                          }
                        });
                      }
                    </script>

                    <li><a href="#Commercial" tabindex="-1" data-toggle="tab" onclick="getForeignRate()">外商投资比重</a></li>
                    <script>
                      function getForeignRate() {
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/ForeignRate.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: 'SELECT cityName,perForeignCost FROM year_' + year.toString()
                          },
                          success: function (result, status, xhr) {
                            //perForeignCost
                            //冒泡排序
                            let sortedResObj = bubbleJson(result, "perForeignCost");
                            //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              perSaveMoneyArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              perSaveMoneyArr.push(sortedResObj[i].perForeignCost);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "外商投资/总GDP", cityNameArr, perSaveMoneyArr, "%");
                          }
                        });
                      }
                    </script>

                    <li class="divider"></li>
                    <li><a href="#Hospital" tabindex="-1" data-toggle="tab" onclick="getMedicalSource()">医疗资源</a></li>
                    <script>
                      function getMedicalSource() {
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/MedicalSource.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: 'SELECT cityName,perMedicalSource FROM year_' + year.toString()
                          },
                          success: function (result, status, xhr) {
                            //perForeignCost
                            //冒泡排序
                            let sortedResObj = bubbleJson(result, "perMedicalSource");
                            //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              perSaveMoneyArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              perSaveMoneyArr.push(sortedResObj[i].perMedicalSource);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "人均医疗资源/个", cityNameArr, perSaveMoneyArr, "个");
                          }
                        });
                      }
                    </script>

                    <li><a href="#Internet" tabindex="-1" data-toggle="tab" onclick="getInternetAmout()">互联网用户数</a></li>
                    <script>
                      function getInternetAmout() {
                        var year = $("#yearSelect").find("option:selected").text();
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/InternetAmout.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: 'SELECT cityName,perInternetNum FROM year_' + year.toString()
                          },
                          success: function (result, status, xhr) {
                            //perForeignCost
                            //冒泡排序
                            let sortedResObj = bubbleJson(result, "perInternetNum");
                            //遍历JSON数组，获取城市名和总GDP
                            let cityNameArr = new Array(),
                              perSaveMoneyArr = new Array();
                            for (var i = 0; i < sortedResObj.length; i++) {
                              cityNameArr.push(sortedResObj[i].cityName);
                              perSaveMoneyArr.push(sortedResObj[i].perInternetNum);
                            }
                            //将参数传递给左边的图表
                            initLeftChart(year, "互联网用户数/万人", cityNameArr, perSaveMoneyArr, "个");
                          }
                        });
                      }
                    </script>

                  </ul>
                </li>

                <li class="active dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">综合指标
                    <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#balance" data-toggle="tab" onclick="getBalance()">综合水平</a></li>
                    <script>
                      function getBalance(){
                        //获取当前选中的年份
                        var year = $("#yearSelect").find("option:selected").text();
                        //获取城市信息
                        let queryRes_2 = getCityQeueuInfo(year).responseJSON;
                        //将城市群进行分类处理
                        let classRes = classCityQeueu(queryRes_2);
                        //构造数据集
                        let cQeueuSet=constructCitySet(classRes.CQeueu,year)
                        ,sdQeueuSet=constructCitySet(classRes.SDQeueu,year);
                        //将参数传递给图表
                        initRightChart_CompScore(cQeueuSet,sdQeueuSet,year.toString());
                      }
                    </script>             

                    <li><a href="#industryPercent" data-toggle="tab" onclick="getIndustryPercent()">产业占比</a></li>
                    <script>
                      function getIndustryPercent() {
                        //获取当前选中的年份
                        var year = $("#yearSelect").find("option:selected").text();
                        //异步请求并更新数据
                        $.ajax({
                          async: true,//发起异步请求
                          url: "/index/IndustryPercent.json",
                          type: "GET",
                          data: {
                            key: "key",
                            value: year,
                            sqlQuery: "SELECT citybasicinfo.cityName,citybasicinfo.cityQeueu,percentSecond,percentThird,(100-percentThird-percentThird) AS 'percentFirst' FROM year_" + year.toString() + ",citybasicinfo WHERE citybasicinfo.cityName=year_" + year.toString() + ".cityName"
                          },
                          success: function (result, status, xhr) {
                            //分别获取隶属中原城市群和山东城市群的城市
                            let classRes = classCityQeueu(result);
                            //统计两个城市群的产业占比平均值
                            let cQeueuAvgObj = getAverageVal(classRes.CQeueu);
                            let sdQeueuAvgObj = getAverageVal(classRes.SDQeueu);
                            console.log(cQeueuAvgObj);
                            console.log(sdQeueuAvgObj);
                            let legendObj = {
                              // top: 10,
                              data: ['中原城市群', '山东半岛城市群'],
                              textStyle: {
                                color: '#fff',
                                fontSize: 16
                              }
                            }
                            initRightChart(cQeueuAvgObj, sdQeueuAvgObj, "一/二/三产业占比分布", legendObj);
                          }
                        });
                      }

                      //将查询结果进行分类-中原城市群和山东半岛城市群
                      function classCityQeueu(result) {
                        let cQeueu = [], sdQeueu = [];
                        for (var i = 0; i < result.length; i++) {
                          if (result[i].cityQeueu == "中原城市群")
                            cQeueu.push(result[i]);
                          else
                            sdQeueu.push(result[i]);
                        }
                        return {
                          "CQeueu": cQeueu,
                          "SDQeueu": sdQeueu
                        };
                      }

                      //统计城市群中的第一/二/三产业的平均占比
                      function getAverageVal(qeueuArr) {
                        let totalFirst = 0, totalSecond = 0, totalThird = 0;
                        //遍历对象数组
                        for (var i = 0; i < qeueuArr.length; i++) {
                          totalFirst += qeueuArr[i].percentFirst;
                          totalSecond += qeueuArr[i].percentSecond,
                            totalThird += qeueuArr[i].percentThird;
                        }
                        return [
                          { 'value': totalFirst / qeueuArr.length, 'name': "第一产业" },
                          { 'value': totalSecond / qeueuArr.length, 'name': "第二产业" },
                          { 'value': totalThird / qeueuArr.length, 'name': "第三产业" }
                        ];
                      }

                    </script>
                    
                  </ul>
                </li>

                <li><a href="#Factor" onclick="getComScore()">因子分析</a></li>

                <li><a href="/thematicPage">专题信息</a></li>
                <li><a href="#" title="退出系统">
                    <span class="glyphicon glyphicon-log-out" aria-hidden="true" onclick="exitCurPage()"></span>
                    <script>
                      function exitCurPage(){
                        //退出当前页面
                        location.href="/welcome";
                      }
                    </script>
                  </a></li>
              </ul>
            </div>
          </div>
        </nav>
      </ul>
    </div>
    <!-- 导航部分---end -->

    <!-- 主体部分---begin -->
    <div class="row">
      <!-- 坐标图表部分---begin -->
      <div class="col-md-2">
        <div id="leftChart" style="width: 100%;height:850%;">
        </div>
      </div>
      <!-- 坐标图表部分---end -->

      <!-- 中间地图部分---begin -->
      <div class="col-md-7">
        <div id="map"
          style="position: absolute;left: 0px;width: 100%;height: 843px;background-color: lavender;text-align: right;">

          <div class="time" id="timeSelect">
            <span id="swictSpan" class="glyphicon glyphicon-th-list" title="切换时间维度" onmouseover="showYearSelect()"
              onmouseout="hideYearSelect()"></span>
            <select class="year" style="width: 55px;height: 30px;" id="yearSelect" onchange="chageYear()">
              <option value="2018">2018</option>
              <option value="2017">2017</option>
              <option value="2016">2016</option>
              <option value="2015">2015</option>
              <option value="2014">2014</option>
              <option value="2013">2013</option>
              <option value="2012">2012</option>
              <option value="2011">2011</option>
              <option value="2010">2010</option>
              <option value="2009">2009</option>
              <option value="2008">2008</option>
              <option value="2007">2007</option>
            </select>
          </div>

          <div class="input-group" id="searchInput">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button" onclick="searchCity()">Go!</button>
            </span>
            <input type="text" class="form-control" id="inputText" placeholder="Search for...">
          </div>
          <div class="btn-group-vertical r-list" role="group" id="anniu">
            <button type="button" class="btn btn-default r-item r-item3" onmouseover="showSearchInput()"
              onmouseout="hideSearchInput()" onclick="noViewSearchInput()" data-toggle="tooltip" data-placement="left"
              title="搜索城市">
              <button type="button" class="btn btn-default r-item r-item2" onclick="changeArea()" data-toggle="tooltip"
                data-placement="left" title="中心定位"></button>
            </button>
            <button type="button" class="btn btn-default r-item" onclick="fullExtent()" data-toggle="tooltip"
              data-placement="left" title="全幅显示"></button>
            <button type="button" class="btn btn-default r-item r-item4" onclick="refreshMap()" data-toggle="tooltip"
              data-placement="left" title="刷新图层"></button>
          </div>
        </div>
      </div>
      <!-- 中间地图部分---end -->

      <!-- 坐标图表部分---begin -->
      <div class="col-md-3">
        <div id="rightChart" style="width:100%;height:850%;"></div>
      </div>
      <!-- 左边图表部分---end -->
    </div>
    <!-- 主体部分---end -->
  </div>

  <!-- 引入自定义JS文件 -->
  <!-- 加载echarts图表 -->
  <script type="text/javascript" src="../public/js/loadCharts.js"></script>
  <!-- 数值处理js文件 -->
  <script src="../public/js/numericCompute.js"></script>
  <!-- <script src="js/index.js"></script> -->
  <script src="../public/js/index.js"></script>

</body>

</html>